<template>
    <div class="formSearch">
        <el-form :model="formDataList.searchForm" :label-width="width + 'px'" size="mini">
            <el-form-item :label="item.name" v-for="(item,index) in formDataList.formGroup" :key='item.i_key'>
                <component :is="item.key" :label='item.label' :placeholder='item.placeholder' :comData='item'
                    ref='component' :classStyle='classStyle'></component>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import input from './input.vue'
    import inputNumber from './inputNumber.vue'
    import checkInput from './checkInput'
    import datePicker from './checkInput/datePicker.vue'
    import searchInput from './searchInput.vue'
    import formSelect from './formSelect.vue'
    export default {
        data() {
            return {
                searchData: [],
                keyArr: [],
                temp: [],
            }
        },
        props: {
            formDataList: {
                type: Object,
                default: () => ({})
            },
            screenCondition: {
                type: Array,
                default: () => []
            },
            width: {
                type: Number,
                default: 0
            },
            classStyle:{
                type:String,
                default:''
            }
        },
        components: {
            // srk: 普通input输入框; jsk: 计数器; cki: 计划开始/结束时间; dpi: 实际开始/结束时间; sel: 基础多选/单选; sci: 远程搜索
            srk: input,
            jsk: inputNumber,
            cki: checkInput,
            dpi: datePicker,
            sci: searchInput,
            sel: formSelect
        },
        methods: {
            // 获取数据
            getData() {
                let data = []
                this.temp = []
                if (this.$refs.component != undefined) {
                    this.$refs.component.forEach(e => this.temp = [...this.temp, e.obj])
                    data = this.temp.map(i => {
                        return {
                            fieldId: i.key,
                            fieldValue: i[i.key],
                            compType: i.compType,
                            dynamicType: i.dynamicType,
                            chineseName: i.chineseName,
                            type: i.type
                        }
                    })
                    data.forEach(i => { //过滤掉对象中值为undefined得属性
                        Object.keys(i).forEach(k => {
                            if (i[k] == undefined) delete i[k]
                        })
                    })
                    data = data.filter(i => i.fieldValue.length != 0)  //将没有fieldValue的表单项过滤掉
                }
                return data
            },
            //重置
            reset() {
                this.searchData = []
            },
            setUp() {
                this.$nextTick(() => {
                    this.$refs.component != undefined && this.$refs.component.forEach(e => {
                        this.screenCondition.forEach(i => {
                            if (e.obj.key == i.fieldId) {
                                 if (i.compType == 1) { //动态筛选和选择范围组件
                                    //dynamicType为undefined时=='动态筛选' 反之=='选择范围'
                                    i.dynamicType != undefined ? e.changeValue(1, i
                                        .dynamicType) : e.changeValue(0, undefined, i
                                            .fieldValue)
                                } else {
                                    e.editValue(i.fieldValue)
                                }
                            }
                        })
                    })
                })
            }
        }
    }
</script>